import {createStackNavigator} from 'react-navigation-stack';
import React from 'react';
import IconFont from '../resource/iconfont';
import {getRealSize} from '../utils';
import MessagesScreen from '../pages/messages/messages-screen';
import NoticeScreen from '../pages/messages/notice-screen';
import ChatScreen from '../pages/messages/chat-screen';
import {I18n} from '../reducers/intl';
import {Platform, StyleSheet, View} from 'react-native';
import {RootStore} from '../store/root-store';
import _ from 'lodash';

const MessageNavigator = createStackNavigator(
  {
    Messages: MessagesScreen,
    Notice: NoticeScreen,
    Chat: ChatScreen,
  },
  {
    initialRouteName: 'Messages',
    navigationOptions: ({navigation, screenProps}) => {
      const options = {
        headerBackTitleStyle: Platform.OS === 'ios' && {
          height: 0,
          width: 0,
        },
        title: I18n.t('page.title.message'),
        tabBarIcon: ({focused, tintColor}) => {
          const {appState} = RootStore.getState();
          const unreadSysMsg = _.get(appState, 'unreadSysMsg', []);
          const unreadCount =
            unreadSysMsg.length + Number(appState.orderUnreadMsgCount);
          // console.log(
          //   unreadCount,
          //   appState.unreadSysMsg,
          //   appState.orderUnreadMsgCount,
          // );
          return (
            <View>
              <IconFont
                name={
                  focused ? 'molarmenu-message-fill' : 'molarmenu-message-half'
                }
                color={tintColor}
                size={getRealSize(22)}
              />
              {unreadCount ? <View style={Styles.badge} /> : null}
            </View>
          );
        },
        tabBarVisible: navigation.state.index < 1,
      };
      return options;
    },
  },
);

export default MessageNavigator;

const Styles = StyleSheet.create({
  badge: {
    position: 'absolute',
    right: 0,
    top: 0,
    width: getRealSize(8),
    height: getRealSize(8),
    color: 'white',
    backgroundColor: 'red',
    fontSize: getRealSize(8),
    borderRadius: getRealSize(4),
    textAlign: 'center',
  },
});
